<template>
    <div class="shoppingcart">
      <div class="title">
          <ul>
              <li>订单信息</li>
              <li>单价</li>
              <li>数量</li>
              <li>金额</li>
              <li>操作</li>
          </ul>
      </div>
        <div class="content">
             <div class="content-list">
                 <el-checkbox-group v-model="checkedCities" @change.stop="handleCheckedCitiesChange">
                     <el-checkbox :label="1" :key="1">
                         <ul>
                             <li>
                                 <img src="../../../assets/meirong1.jpg" alt="">
                                 <p>注射微整</p>
                                 <p>265型号玻尿酸10ml<br>+保水面膜</p>
                             </li>
                             <li>
                                 <p>￥399</p>
                             </li>
                             <li style="text-align: center">
                                <el-input-number v-model="num1" @click.stop="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
                             </li>
                             <li>

                                 <p>￥399</p>

                             </li>
                             <li>

                                 <p>删除</p>

                             </li>
                         </ul>
                     </el-checkbox>
                 </el-checkbox-group>
             </div>
            <div class="jiesuan">
                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                <span>删除</span> <span>已选购<b>0</b>件</span> <span>合计(不算运费)：<b>0.00</b>元</span>
                <span>结算</span>
            </div>

        </div>
    </div>
</template>

<script>
    const cityOptions = ['上海'];
    export default {
        name: "ShoppingCart",
        data () {
            return {
                checkAll: false,
                checkedCities: [],
                cities: cityOptions,
                isIndeterminate: true,
                num1: 1
            }
        },
        methods :{
            handleCheckAllChange(val) {
                this.checkedCities = val ? cityOptions : [];
                this.isIndeterminate = false;
            },
            handleCheckedCitiesChange(value) {
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.cities.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
            },
            handleChange(value) {
                console.log(value);
            }
        }
    }
</script>

<style  lang="less">
    @import "../../../style/style";
    .shoppingcart{
        border: solid 1px #e0e0e0;
        width: 700px;
        height: 1295px;
        border-top: none;
        .title{
            width: 698px;
            height: 43px;
            line-height: 43px;
            background-color: #f5f5f5;
            border-bottom: solid 1px #e0e0e0;
            border-top: 2px solid @theme-color-dark;
           ul{
               >:first-child{
                   width: 44%;
               }
               >:last-child{
                   width: 12%;
               }
               >:nth-child(4){
                   width: 13%;
               }
               li{
                   float: left;
                   width: 14%;
                   text-align: center;
                   color: #666666;
                   font-size: 12px;
               }
           }
        }
        .content{
            padding: 30px 13px 20px 27px;
            .content-list{
                width: 660px;
                height: 114px;
                border: solid 1px #e0e0e0;
                padding: 17px 17px 17px 10px;
                .el-checkbox{
                    width: 100%;
                    .el-checkbox__label{
                        width: 100%;
                    }
                }
               ul{
                   >:first-child{
                       width: 40%;
                       padding: 0;
                       >:nth-child(2){
                           color: #333333;
                           padding-bottom: 3px;
                       }
                       p{
                           text-align: left;
                           margin-left: 20px;
                           width:120px;
                           float: left;
                           color: #999999;
                       }
                   }
                   li{
                       float: left;
                       width: 15%;
                       color: #666666;
                       font-size: 12px;
                       padding-top: 30px;
                       img{
                           width: 80px;
                           height: 80px;
                           float: left;
                       }
                       p{
                           text-align: center;
                       }
                       .el-input-number{
                           width: 60px;
                           line-height: 20px;
                       }
                       .el-input-number__decrease, .el-input-number__increase{
                           width: 16px;
                       }
                       .el-input-number .el-input__inner{
                           padding-left: 0;
                           padding-right: 0;
                           height: 22px;
                           line-height: 20px;
                       }
                   }
                }
            }
            .jiesuan{
                width: 660px;
                height: 48px;
                background-color: #f5f5f5;
                border: solid 1px #e0e0e0;
                margin-top: 20px;
                line-height: 45px;
                padding-left: 10px;
                >span{
                    margin-left: 30px;
                    font-size: 14px;
                    color: #666666;
                    b{
                        color: @theme-color-dark;
                        font-size: 20px;
                        padding: 0 5px;
                    }
                }
                >:nth-child(3){
                    margin-left: 130px;
                }
                >:last-child{
                    background-color: @theme-color-dark;
                    color: white;
                    width: 90px;
                    height: 46px;
                    display: block;
                    text-align: center;
                    float: right;
                }
            }
        }
    }
</style>